<script setup>
import {host_custom} from "@/host.js";
import {toLocalDate} from "@/utils/toLocalDate.js";
import {onMounted, ref} from "vue";
import {userStore} from "@/stores/userStore.js";
import { getInboxApi, getInboxRequestApi } from "@/api/message.js";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import {ignoreFriendRequest} from "@/api/friend.js";
import {friendService} from "@/service/friendService.js";
const userAction = userStore()

const inboxContent = ref([])
const friendRequest = ref([])

const props = defineProps({
  isShow: {
    required: true,
    type: Boolean
  }
})
const isShow = ref(false)
const getFriendRequest = async () => {
  const res = await getInboxRequestApi(userAction.userInfo.id)
  if (res.status === 200) {
    friendRequest.value = res.data
    // console.warn('***** User Inbox *****')
    // console.table(res.data)
  }
}
const getInbox = async () => {
  const res = await getInboxApi(userAction.userInfo.id)
  inboxContent.value = res.data
}

const accept = async (idx) => {
  const res = await friendService().acceptRequestAndSync(friendRequest.value[idx])
  if (res) {
    friendRequest.value[idx].isAccept = 1
  }
}

const ignore = async (idx) => {
  const res = await ignoreFriendRequest(friendRequest.value[idx].sender_id, friendRequest.value[idx].receiver_id)
  if (res.status === 200) {
    friendRequest.value[idx].isAccept = 1
  }
}

onMounted( async () => {
  await getFriendRequest()
  await getInbox()
})
</script>

<template>
  <div
      @click.prevent="isShow=!isShow"
      v-if="isShow"
      class="bigMask"
  ></div>

  <div class="inboxContainer position-relative">
    <div class="inboxBtn" @click="isShow=!isShow">
      <font-awesome-icon class="btnIcon" :icon="['fas', 'inbox']" />
    </div>

    <div class="inbox bg-body-tertiary p-2 rounded-3" v-if="isShow">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">收件箱</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">请求</button>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active pt-2" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
          <template v-for="item in inboxContent">
            <div :key="item.id" v-if="item.type==='system'" class="d-flex text-body inboxMsg justify-content-between align-items-center">
              <span>{{ item.head }}</span>
              <span style="font-size: 12px">{{ toLocalDate(item.create_time) }}</span>
            </div>
          </template>

          <div v-if="inboxContent.length === 0" class="text-center">
            <p class="m-2">暂无消息</p>
          </div>
          <div class="text-center"><small class="text-secondary" style="font-size: 12px">已删除超过60天的信息</small></div>
        </div>

        <div class="tab-pane fade pt-2 friendReqTab" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
          <template v-for="(item, index) in friendRequest" :key="item.id">
            <div class="d-flex inboxMsg justify-content-between align-items-center text-body">
              <div class="d-flex align-items-center">
                <img :src="host_custom+'/pfp/'+item.sender_avatar" width="30" height="30" class="rounded-circle" alt="">
                <div class="d-flex flex-column ps-2">
                  <span style="font-size: 12px">来自 <b> {{ item.sender_name }} </b> 的好友请求</span>
                  <span style="font-size: 10px">{{ toLocalDate(item.send_time) }}</span>
                </div>
              </div>

              <span style="font-size: 14px" v-if="item.isAccept" >已处理</span>

              <div v-else class="btn-group btn-group-sm" role="group" aria-label="Basic mixed styles example">
                <button type="button" @click="accept(index)" class="btn btn-outline-secondary"><font-awesome-icon :icon="['fas', 'check']" /></button>
                <button type="button" @click="ignore(index)" class="btn btn-outline-secondary"><font-awesome-icon :icon="['fas', 'xmark']" /></button>
              </div>
            </div>
          </template>
          <div v-if="friendRequest.length === 0" class="text-center">
            <p class="m-2">暂无消息</p>
          </div>
          <div class="text-center"><small class="text-secondary" style="font-size: 12px">已删除超过60天的信息</small></div>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bigMask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.inboxContainer {
  z-index: 1000;
}

button {
  transition: none;
}

.inboxBtn {
  cursor: pointer;
}

.inboxBtn:hover {
  color: var(--bs-primary);
}

.inboxMsg {
  transition: none;
  padding: 8px 5px;
  border-radius: .5rem;
}

.inboxMsg:hover {
  background-color: var(--bs-dark-bg-subtle);
}

.inbox {
  filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24));
  position: absolute;
  transform: translate(-95%, 5px);
  width: 400px;
  max-height: 300px;
}

#myTabContent {
  overflow-y: auto;
  max-height: 200px;
}

#myTabContent::-webkit-scrollbar {
  width: 4px;
}
</style>